<?=$this->headTitle("Пользователи");?>
   <?php $this->JQuery()->addJavaScriptFile($this->baseUrl('js/jquery/jgrid/js/jquery.jqGrid.min.js'))
					->addJavaScriptFile($this->baseUrl('js/jquery/jgrid/src/i18n/grid.locale-ru.js'))
					->addStyleSheet($this->baseUrl('js/jquery/jgrid/css/ui.jqgrid.css'))
					->addJavaScriptFile($this->baseUrl('/js/jquery/js/i18n/jquery.ui.datepicker-ru.js'))
					->addJavaScriptFile($this->baseUrl('/js/jquery/js/jquery-ui-timepicker-addon.js'))
					->addStylesheet($this->baseUrl('/css/jquery-ui-timepicker-addon.css'))
					;?>
</head>   
<body>
<script type="text/javascript">
var lastsel;

jQuery(document).ready(function(){
var w = getWidth();

//console.log(w);
	$('#table').jqGrid({
		width:w,
		height:'500',
	  datatype: 'json',
	  //altRows: true,
		url:'/admin/users/index',
		mtype: 'POST',
			colNames:['ID','Аватар','Логин','Имя','email','Роль','Дата регистраций','Пароль'],
			colModel :[
	{name:'id', index:'id', width:10,align:'center',editable:false,editoptions:{readonly:true,size:10},search:true,searchtype:"string",searchoptions:{sopt:['eq']}},
	{name:'avatar', index:'Аватар', width:10,editable:false,edittype:'text',align:'center',sortable: true,formatter:avatar,search:false},
						
	{name:'userlogin', index:'userlogin', width:50,editable:true,align:'left',edittype:"text",search:false,editrules:{custom: true, custom_func: Check},
	search:true,searchtype:"string",searchoptions:{sopt:['cn']}},
						
	{name:'username', index:'username', width:50,editable:true,edittype:'text',align:'left',editrules:{custom: true, custom_func: Check},
	search:true,searchtype:"string",searchoptions:{sopt:['cn']}},
						
	{name:'email', index:'email', width:25,editable:true,align:'center',align:'center',editrules:{custom: true, custom_func: Check},
	search:true,searchtype:"string",searchoptions:{sopt:['cn']}},
						
	{name:'role', index:'роль', width:10,editable:false,align:'center',search:false},

    {name:'reg_time', index:'Дата создания', width:30,editable:true,align:'center',search:false,formatter:'date',formatoptions:{dayNames: [ "Вс","Пн","Вт","Ср","Чт","Пт","Сб",
                    "Воскресенье", "Вторник", "Среда","Четверг", "Пятница", "Суббота","Понедельник"],
                    monthNames: [ "Янв","Фев","Мар","Апр","Май","Июн","Июл","Авг","Сен","Окт","Ноя","Дек",
                        "Янв","Фев","Мар","Апр","Май","Июн","Июл","Авг","Сен","Окт","Ноя","Дек"],
                    srcformat: 'Y-m-d H:i:s',newformat: 'm  d  Y  H:i:s',reformatAfterEdit:false},
                    editoptions:{ size:20,required: true,
                    dataInit:function (dt){

                        var dtVal = $(dt).val();
                        var dT = new Date(dtVal);
                        console.log(dT.toLocaleString());
                        var h = dT.getHours();
                        var min = dT.getMinutes();
                        var s = dT.getSeconds();
                        var Y = dT.getFullYear();
                        var mon = dT.getMonth();
                        var d = dT.getDay();

                        $(dt).datetimepicker({
                        dateFormat:'mm-dd-yy',
                        showSecond:true,
                        defaultDate:new Date(mon+'/'+d+'/'+Y),
                        hour:h,
                        minute:min,
                        second:s,
                        timeFormat:'HH:mm:ss'});
                    }}},
    {name:'password', index:'password', width:10,editable:false,search:false,hidden:true,edithidden:true,editrules:{custom: true, custom_func: Check}}
	],

	caption: 'Список пользователей',
	pager: jQuery('#pager'),
	rowNum:15,
	rowList:[5,10,30],
	sortname: 'id',
	sortorder: "asc",
	viewrecords: true,
	emptyrecords: "Nothing to display",	
	multiselect: true,
	editurl: "/admin/users/index",
	loadonce: true,
	rownumbers: true,
	jsonReader: { repeatitems : true},
	gridview : true,
	loadComplete:function(data){
			if(data.page >=1){
				var trCount = $('#table').find('tbody').find('tr').length;
				addEmptyRows(trCount);
				}
			}
	});
jQuery("#table").jqGrid('navGrid','#pager',{edit:false,add:true,addtext:'New user',addtitle:'Новый пользователь',del:true,deltext:'Delete',deltitle:'Удалить пользователя',search:true, searchtext: 'Search',searchtitle:'Поиск',refresh:true,refreshtext:'Reload',refreshtitle:'Обновить',view: true,viewtext:'View',viewtitle:'Информация о пользователе'},
      {}, // default settings for edit. addfunc:NewRow,delfunc:FunDelete,editfunc:FunUpdate,
			{url:'/admin/users/index',
				closeAfterAdd:true,
				reloadAfterAdd:true,
				width:'200px',
				addCaption:'Новый пользователь',
				bSubmit:'сохранить', 
				bCancel: "Отмена",
				top:200,
                left:650,
				saveData: "Новый пользователь успешно добавлен.",
				afterShowForm : function(){
					if($('#tr_password').length >0){$('#tr_password').remove()}
						var inp = $('<input>',{id:'password','class':'FormElement ui-widget-content ui-corner-all',name:'password',type:'password',role:'textbox'});
						var tr = $('<tr>',{'id':'tr_password','class':'FormData','rowpos':'4'});
						var captionTD = $('<td>',{'class':'CaptionTD',text:'Пароль'});
						var DataTD = $('<td>',{'class':'DataTD'}).append(inp);
						tr.append(captionTD).append(DataTD);
						$('#editmodtable').find('#tr_reg_time').parent().append(tr);
				},
				afterSubmit: function(resp) {
									var data;
 									data = $.parseJSON(resp.responseText);
                                    console.log("data: ",data);
                                    console.log("resp: ",resp);

										$('#editmodtable').css('display','none');
							if(data.oper==='Item_exist'){
									var msgError = $('<div>',{title:'Ошибка создания пользователя.',
									text:'Пользователь с данным логином уже существует.',id:'error_modal',
									style:'class:ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all;padding:25px;color:#e00707;font-weight:600'});
									$(msgError).dialog({
                                        buttons:{
                                            'Закрыть':function(){$(this).dialog('close');}},
                                        modal: true,
                                        resizable:false,
                                        position: "center",
                                        open: function(){
                                            $(this).parent().find('.ui-dialog-buttonpane button:first-child').button({
                                                icons: { primary: 'ui-icon-circle-close' }
                                            });
                                    }});
									return [true, ""];
							}
							if(data.oper==='Item_create_success'){
							var msgSuccess = $('<div>',{title:'Создание пользователя.',text:'Поздравляем пользователь успешно создан.',id:'success_modal',style:'padding:25px;color:#1f9400;font-weight:600'});
							$(msgSuccess).dialog({
                                    buttons:{
                                        'Закрыть':function(){$(this).dialog('close');}},
                                    modal: true,
                                    resizable: false,
                                    position: [650,200],
                                    open: function(){
                                             $(this).parent().find('.ui-dialog-buttonpane button:first-child').button({
                                                 icons: { primary: 'ui-icon-circle-close' }
                                            });
                                }});
								$(this).jqGrid('setGridParam', {datatype:'json'});
           				        return [true,'',false];
							};

          }
      },// default settings for add
      { url:'/admin/users/index'}, // delete instead that del:false we need this
      {closeOnEscape:true, multipleSearch:false, closeAfterSearch:true, multipleGroup:false,reloadAfterSearch:true}, // search options
      {},
      {}
	);

jQuery("#table").jqGrid('inlineNav',"#pager",{
    add:false,
    search:true,
    edit:true,edittext:'Edit',edittitle:'Редактировать',
    savetext:'Save',savetitle:'Сохранить',
    canceltext:'Cancel',canceltitle:'Отмена',
    editParams: {
        //useFormatter:true,
        aftersavefunc:reloadTable
        //position: "afterSelected"
    }
    });
$('#alertmod').css({'top':250,'left':750});


});

function addEmptyRows(rowCount){
	var tr = '<tr class="ui-widget-content jqgrow ui-row-ltr"><td class="ui-state-default"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
	for(var i=rowCount;i < 24;i++){
	 $('#table').find('tbody').append(tr);
	}
}

function Check(cellvalue,rowObject)
{
	var dataCheck;
	var error = [false,'Неккоректно введенные символы'];
	if(rowObject==='Логин'){
		 dataCheck = /^[a-z]+[\w]+$/i;
	}
	else if(rowObject==='Имя'){
		 dataCheck = /^[a-zа-яё]+[a-zа-яё\d]+$/i;
	}
	else if(rowObject==='email'){
		 dataCheck = /^[\w]{2,30}@[\a-z]{2,6}.[a-z]{2,4}$/i;
		 error = [false,'Неккоректно введенный Email'];
	}
	else if(rowObject==='Дата регистраций'){
			 dataCheck = /^[\d]{4,4}-[\d]{2,2}-[\d]{2,2} [\d]{2,2}:[\d]{2,2}:[\d]{2,2}$/i;
			error = [false,'Неккоректно введенная дата'];
	}
	else if(rowObject==='Пароль'){
		 dataCheck = /[\w]+/;
		 console.log(cellvalue);
		 error = [false,'Неккоректно введенный пароль'];
	}
		if(dataCheck.exec(cellvalue) !==null)   
	  {  
	  	if(cellvalue.length < 4 && rowObject !=='Пароль'){return [false,'Минимальная длина строки 4 символа'];}
	  	else if(cellvalue.length < 6 && rowObject ==='Пароль'){return [false,'Минимальная длина пароля 6 символа'];}
	  	else if(cellvalue.length > 40 && rowObject ==='Пароль'){return [false,'Максимальная длина пароля 40 символов'];}
			else if(cellvalue.length > 20 && rowObject !=='Пароль'){return [false,'Максимальная длина строки 4 символа'];}
			else if(cellvalue.length > 20){}
	    return [true,"ok"];
	 	}else{
					return error;
	 			 }
}

function avatar(cellvalue, options, rowObject)
	{
	   return "<a href='"+cellvalue+"'><img src='"+cellvalue+"' style='width:25px'></a>";	
	}
function reloadTable(){
    $(this).jqGrid('setGridParam', {datatype:"json"}).trigger("reloadGrid");
    return [true,'',false];
}
function getWidth(){
    var width = $(document).width();
    console.log($(document).width());

        return width-350;

}
</script>
<div style="float:left;">
<table id="table" ></table>
<div id="pager"></div>
<div style="text-align:left;">
</div>
</div>
